import {
  ClearOutlined,
  DownloadOutlined,
  ReloadOutlined,
  SearchOutlined,
} from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import React from 'react';

import LocalInfo from '@/utils/localInfo';

import VerifyPinCode from '../VerifyPinCode';
type FilterProps = {
  exportDisabled?: boolean;
  clearDisabled?: boolean;
  setKeyword: (keyword: string) => void;
  typeName?: string;
};

const Filter = React.memo(
  ({
    exportDisabled,
    clearDisabled,
    setKeyword,
    typeName = 'interface-log',
  }: FilterProps) => {
    const [form] = Form.useForm();
    const [exportVisible, setExportVisible] = React.useState(false);
    const [clearVisible, setClearVisible] = React.useState(false);

    const onSearch = () => {
      const keyWord = form.getFieldValue('keyword');
      setKeyword(keyWord); // 当关键字输入框内容变化时，调用父组件传递进来的方法设置关键字
    };
    const onReset = () => {
      form.resetFields();
      setKeyword('');
    };

    return (
      <>
        <Form form={form}>
          {/* 关键字搜索框 */}
          <div
            style={{
              background: '#fff',
              padding: '25px',
              marginBottom: '20px',
              marginTop: '-24px',
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span
                style={{
                  marginLeft: '8px',
                  marginRight: '6px',
                  whiteSpace: 'nowrap',
                  display: 'none',
                }}
              >
                信息 :
              </span>
              <Form.Item name="keyword" style={{ marginBottom: 0 }}>
                <Input
                  style={{
                    width: '255px',
                    display: 'none',
                  }}
                  placeholder="请输入信息关键字"
                  allowClear
                />
              </Form.Item>
              {/* 按钮 */}
              <Button
                type="primary"
                icon={<SearchOutlined />}
                style={{
                  marginLeft: '15px',
                  backgroundColor: '#3367ea',
                  display: 'none',
                }}
                onClick={onSearch}
              >
                查询
              </Button>
              <Button
                icon={<ReloadOutlined />}
                style={{ marginLeft: '10px', display: 'none' }}
                onClick={onReset}
              >
                重置
              </Button>
              {!exportDisabled && (
                <Button
                  icon={<DownloadOutlined />}
                  type="primary"
                  style={{
                    marginLeft: '10px',
                  }}
                  onClick={() => setExportVisible(true)}
                  // disabled={LocalInfo.getRoleId() === 2}
                >
                  导出
                </Button>
              )}
              {!clearDisabled && (
                <Button
                  style={{ marginLeft: '10px' }}
                  icon={<ClearOutlined />}
                  onClick={() => setClearVisible(true)}
                  disabled={LocalInfo.getRoleId() === 2}
                >
                  清空
                </Button>
              )}
            </div>
          </div>
        </Form>
        <VerifyPinCode
          title="导出"
          typeName={typeName}
          visible={exportVisible}
          setVisible={setExportVisible}
        />
        <VerifyPinCode
          title="清空"
          typeName={typeName}
          visible={clearVisible}
          setVisible={setClearVisible}
        />
      </>
    );
  },
);
Filter.displayName = 'Filter';
export default Filter;
